<template>
  <Button @click="gotoBack">返回上一页</Button>
  <h1>文章id: {{ params.id }}</h1>
  <h1>文章标题：{{ params.title ? params.title : "无" }}</h1>
  <p>
    <router-link to="/article/4/苹果紧急往美国运iPhone">更多新闻</router-link>
  </p>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

// 获取路径参数
const params = ref(route.params)

// 跳转至上一页
function gotoBack() {
  router.go(-1)
}

// 监听路由参数的变化
watch(
  () => route.params,
  (newParams) => {
    // 获取新路由参数
    params.value = newParams
  }
)
</script>